<!--suppress ALL -->
<template>
  <div class="app-container">

    <div align="left">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="邮箱名">
          <el-input v-model="formInline.email" placeholder="邮箱名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryResult">查询</el-button>
          <el-button type="addEmail" @click="addEmail">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="list" border fit highlight-current-row>
<!--      如果表格属性声明为type=index 直接展示为排序-->
      <el-table-column align="center" label="序号" type="index"  width="120"></el-table-column>
<!--prop绑定需要展示的值-->
      <el-table-column label="记录ID" align="center" v-if="false" width="100" prop="id"></el-table-column>

      <el-table-column label="邮箱名" width="300">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <el-table-column label="备注信息" width="200">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" @click="editEmail(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--pagination分页-->
    <pagination v-show="total>0" :background="bkcolor" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>

import Pagination from '@/components/Pagination/index'

export default {
  components: { Pagination },
  data() {
    return {
      bkcolor: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: null,
      formInline: {
        email: '',
      }
    }
  },
  // vue生命周期钩子函数
  created() {
    this.getList()
  },
  methods: {
    queryResult() {
      // 因为axios内部的then内部的this是指的axios对象，而不是当前vue的对象，因此把当前Vue的对象用vm声明，这样this就不会冲突
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/email/getEmailName?email=' +this.formInline.email
      }).then(response=> {
        // 得到一个PageInfo对象
        this.total = response.data.total// 将PageInfo中的total赋给vm的total
        this.list = response.data.list// 当前页显示的所有数据
      })
    },
    onSubmit() {
      console.log('submit!')
    },
    getList() {
      var vm = this
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/email/getPage?pageNum=' + vm.listQuery.page + '&pageSize=' + vm.listQuery.limit
      }).then(response=> {
        // 得到一个PageInfo对象
        this.total = response.data.total// 将PageInfo中的total赋给vm的total
        this.list = response.data.list// 当前页显示的所有数据
      })
    },
    addEmail() {
      this.$router.push('/addEmail')
    },
    editEmail(id) {
      this.$router.push({
        //  路由跳转  path||name  填写一个即可
        name: 'editEmail',
        query: {
          id: id
        },
      //  params也可以传参非明文传参通过name传参、刷新页面后数据会丢失
      //  query明文传参刷新页面传参不会消失
      //  params: {id: id}
      })
    },
    deleteUser(id) {
      //我给你说个写法、不用定义this 了
      var vm = this
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/email/deleteEmail?id=' + id
      }).then(resp => {
        console.log(resp)
        if (resp.data == 'success') {
          // 弹框
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          //   重新请求表格数据
          this.getList()
        } else {
          this.$message.error('删除失败')
        }
        // eslint-disable-next-line handle-callback-err
      }).catch(function(error) {
        // 弹框
        vm.$message.error('删除失败')
      })
    }

  }
}
</script>

